// margin

@mixin marginMixin($top, $right, $bottom, $left) {
  @if ($top) {
    margin-top: #{$top}px !important;
  }
  @if ($right) {
    margin-right: #{$right}px !important;
  }
  @if ($bottom) {
    margin-bottom: #{$bottom}px !important;
  }
  @if ($left) {
    margin-left: #{$left}px !important;
  }
}

@mixin marginGroupMixin($margin) {
  .ui-margin-#{$margin},
  .ui-m-#{$margin} {
    @include marginMixin($margin, $margin, $margin, $margin)
  }

  .ui-margin-top-#{$margin},
  .ui-mt-#{$margin} {
    @include marginMixin($margin, null, null, null)
  }

  .ui-margin-right-#{$margin},
  .ui-mr-#{$margin} {
    @include marginMixin(null, $margin, null, null)
  }

  .ui-margin-bottom-#{$margin},
  .ui-mb-#{$margin} {
    @include marginMixin(null, null, $margin, null)
  }

  .ui-margin-left-#{$margin},
  .ui-ml-#{$margin} {
    @include marginMixin(null, null, null, $margin)
  }

  .ui-margin-x-#{$margin},
  .ui-mx-#{$margin} {
    @include marginMixin(null, $margin, null, $margin)
  }

  .ui-margin-y-#{$margin},
  .ui-my-#{$margin} {
    @include marginMixin($margin, null, $margin, null)
  }
}

@include marginGroupMixin(0);
@include marginGroupMixin(4);
@include marginGroupMixin(8);
@include marginGroupMixin(12);
@include marginGroupMixin(16);
@include marginGroupMixin(20);
@include marginGroupMixin(24);
@include marginGroupMixin(32);
